<template>
  <div class="optimization-recommendations">
    <div class="recommendations-content">
      <div class="immediate-actions">
        <h4>即时行动建议</h4>
        <div class="actions-list">
          <div 
            v-for="(action, index) in immediateActions" 
            :key="index"
            class="action-card"
          >
            <div class="action-header">
              <h4>{{ action.strategy }}</h4>
              <div class="impact-indicator" :class="getImpactClass(action.applicability)">
                影响度: {{ action.applicability }}
              </div>
            </div>
            <div class="action-content">
              <p class="example">{{ action.example }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="preventive-measures">
        <h4>预防措施</h4>
        <div class="measures-list">
          <div 
            v-for="(measure, index) in preventiveMeasures" 
            :key="index"
            class="measure-card"
            :class="`priority-${measure.priority}`"
          >
            <div class="measure-header">
              <h4>{{ measure.method }}</h4>
              <div class="priority-badge" :class="measure.priority">{{ measure.priority }}</div>
            </div>
            <p class="example">{{ measure.example }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ImmediateAction, PreventiveMeasure } from '../../types/analysis';

defineProps<{
  immediateActions: ImmediateAction[];
  preventiveMeasures: PreventiveMeasure[];
}>();

const getImpactClass = (applicability: number) => {
  if (applicability >= 8) return 'high-impact';
  if (applicability >= 5) return 'medium-impact';
  return 'low-impact';
};
</script>

<style scoped>
.optimization-recommendations {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.recommendations-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #1a2b4e;
}

/* 即时行动样式 */
.actions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid #2A5CFF;
  transition: all 0.2s ease;
}

.action-card:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.action-strategy {
  font-weight: 600;
  color: #1a2b4e;
}

.impact-indicator {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.high-impact {
  background: rgba(255, 56, 96, 0.1);
  color: #FF3860;
}

.medium-impact {
  background: rgba(255, 215, 0, 0.1);
  color: #b39700;
}

.low-impact {
  background: rgba(0, 199, 129, 0.1);
  color: #00C781;
}

.action-content {
  font-size: 0.875rem;
  color: #334155;
  margin-bottom: 1rem;
  line-height: 1.5;
  font-style: italic;
}

/* 预防措施样式 */
.measures-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.measure-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.measure-card.priority-high {
  border-left: 3px solid #FF3860;
}

.measure-card.priority-medium {
  border-left: 3px solid #FFD700;
}

.measure-card.priority-low {
  border-left: 3px solid #00C781;
}

.measure-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.measure-method {
  font-weight: 600;
  color: #1a2b4e;
}

.priority-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.priority-high .priority-badge {
  background: rgba(255, 56, 96, 0.1);
  color: #FF3860;
}

.priority-medium .priority-badge {
  background: rgba(255, 215, 0, 0.1);
  color: #b39700;
}

.priority-low .priority-badge {
  background: rgba(0, 199, 129, 0.1);
  color: #00C781;
}

.measure-example {
  font-size: 0.875rem;
  color: #334155;
  margin-bottom: 1rem;
  line-height: 1.5;
  font-style: italic;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .action-header,
  .measure-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
</style>